<template>
  <div class="view-wrapper">
    <div class="bridgeCardDetail">
      <div class="head">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="店铺名称：">
            <el-select v-model="merchantId" placeholder="请选择" @change="getShopId">
              <el-option
                v-for="item in shopList"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员姓名：">
            <el-input
              v-model="formInline.name"
              placeholder="请输入会员名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="交易时间：">
            <el-date-picker
              v-model="date"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="交易单号：">
            <el-input
              v-model="formInline.relevancyNo"
              placeholder="请输入交易单号"
            ></el-input>
          </el-form-item>
          <el-form-item label="会员手机号：">
            <el-input
              v-model="formInline.phone"
              placeholder="请输入会员手机号"
            ></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div class="add">
          <div class="left">
            <!-- <el-button type="primary" @click="">导出表格</el-button> -->
            <export-excel-button
              title="消费记录"
              action="/merchant/card/v1/consumeList/export"
              :params="ExportParams"
            />
          </div>
        </div>
        <ex-table
          ref="table"
          :loading="loading"
          :table-column="tableColumn"
          :table-data="tableData"
          @pageSizeChange="handleSizeChange"
          @currentPageChange="handleCurrentChange"
        >
          <template v-slot:operate="{ scope }">
            <el-button @click="handleEdit(scope.row)" type="primary">编辑</el-button>
            <el-button @click="handleDetele(scope.row.id)"  type="danger">删除</el-button>
          </template>
        </ex-table>
      </div>
    </div>
  </div>
</template>
<script>
// components

import { shopSelectDown ,consumeList} from "@/api/bridgeCard";
import { getToken } from '@/utils/auth'
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";

export default {
  //   name: "",
  components: {
    ExportExcelButton
  },
  mixins: [handlePageMixin],
  data() {
    return {
      loading: true,
      date: [],
      shopList:[],// 店铺列表
      merchantId: '',
      formInline:{
        assetId: '',
        startDate: '',
        endDate: '',
        name: '',
        relevancyNo: '',
        phone: '',
        shopId: '',
      },
      
      tableData: [],
      tableColumn: [
        { prop: "shopName", label: "核卡店铺" },
        { prop: "relevancyNo", label: "交易单号" },
        { prop: "transactionTime", label: "交易时间" },
        { prop: "name", label: "会员姓名" },
        { prop: "phoneNum", label: "手机号" },
        { prop: "orderMoney", label: "交易金额（¥）", width: 60 },
        { prop: "discountsMoney", label: "优惠（¥）" },
        { prop: "useCardMoney", label: "卡余额支付（¥）" },
        { prop: "serviceFee", label: "服务费（¥）" },
        { prop: "platformProcedureFee", label: "提现手续费（¥）" },
        { prop: "practicalReceivedMoney", label: "结算商家金额（¥）", width: 60 },
      ],
    };
  },
  created() {
    this.formInline.assetId = this.$route.query.assetId
    this.getShopDict()
    this.getList()
  },
  computed: {
    ExportParams() {
      const params = {
        ...this.pageOptions,
        ...this.formInline,
      };
      return params;
    },
  },
  methods: {
    //获取下拉店铺
    getShopDict(){
      shopSelectDown('').then((res) => {
        console.log('res',res)
        if(res.code == 200){
          this.shopList = res.result
        }
      });
    },
    getShopId(id){
      console.log('id',id)
      this.shopList.forEach(item =>{
        if(id == item.id){
          var additionalValue = JSON.parse(item.additionalValue)
          this.formInline.shopId = additionalValue.shopId
        }
      })
    },
    getList() {
      //商家列表
      this.formInline.startDate = this.date[0]
      this.formInline.endDate = this.date[1 ]
      const params = {
        ...this.pageOptions,
        ...this.formInline,
      };
      this.loading = true;
      consumeList(params).then((res) => {
        const { total, records } = res.result;
        this.tableData = records;
        this.$refs.table.pageOptions.total = total;
      })
      .finally(() => {
        this.loading = false;
      });
    },
    search() {
      //搜索
      console.log(this.formInline);

      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    reset() {
      //重置
      this.date = [];
      this.merchantId = '';
      this.formInline.phone = '';
      this.formInline.name = '';
      this.formInline.startDate = '';
      this.formInline.endDate = '';
      this.formInline.relevancyNo = '';
      this.formInline.shopId = '';
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.bridgeCardDetail{
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.bt{
  width: 120px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #1890ff;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 30px;
}
.overview{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  .bg_1{
    background: #FFF9EC;
  }
  .bg_2{
    background: #FFF4EB;
  }
  .bg_3{
    background: #F3F7FB;
  }
  .bg_4{
    background: #F5F7FF;
  }
  .list{
    flex: 1;
    height: 120px;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    margin-left: 14px;
    img{
      width: 66px;
      height: 66px;
      border-radius: 50%;
    }
    .txtBox{
      display: flex;
      flex-direction: column;
      margin-left: 14px;
      padding-top: 10px;
      .p1{
        font-size: 14px;
        color: #999;
      }
      .p2{
        font-size: 24px;
        color: #333;
        font-weight: 500;
        margin-top: 8px;
      }
    }
  }
  
}
.receive{
  margin: 20px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  .lable{
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }
}
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
  display: inline-block !important;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
  .add{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .upload-demo{
      display: inline-block;
      margin-right: 10px;
    }
    .left{
      align-items: flex-start;
      display: flex;
    }
    .right{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
